<template>
	<view :class="[primarySize()]">
		<view class="page-foot bg-white">
			<view class="flex-box detail_footer">
				<button hover-class="none" open-type="share" class="footer_img1">
					<image src="https://admin.mosizp.cn/static/public/share.png"></image>
					<view class="text">分享</view>
				</button>
				<view class="footer_img1 ml30" @click="bindToggleFav">
					<image :src="iconPath(isFav?'fav_sc.png':'fav.png')"></image>
					<view class="text">{{isFav?'已':''}}收藏</view>
				</view>
				<view class="foot_btn colf" :class="[!taskStatus?'disabled':'']" @click="bindContact()">
					直接联系
				</view>
			</view>
		</view>
		<view class="container">
			<view class="top_nav">
				<view class="box flex-box">
					<image :src="resume.user.avatar" mode="aspectFill" class="top_user_img"></image>
					<view class="flex-grow-1 pl30">
						<view class="flex-box fs36 col3">
							<view class="flex-grow-1 fwb m-ellipsis pr30">{{resume.username}}</view>
							<view class="fs26 col9" v-if="resume.user.logintime_text">{{resume.user.logintime_text}}</view>
						</view>
						<view class="mt10 fs24 cola5"><text>{{resume.gender_text}} ｜ {{resume.work_experience.name}} ｜ {{resume.education.name}}</text></view>
					</view>
				</view>
			</view>
			<view class="pt20 plr30 pb40">
				<view class="item flex-box">
					<image :src="iconPath('icon_odd4.png')" mode="aspectFill" class="ico36"></image>
					<view class="flex-grow-1 plr15 fs34 col3">{{resume.mobile}}</view>
					<image @click="bindContact()" :src="iconPath('icon_odd5.png')" mode="aspectFill" class="ico48"></image>
				</view>
				<view class="fwb fs34 col0 mt40">工作区域</view>
				<view class="item item2">
					<text class="pr z2">{{resume.fav_district.name}}</text>
				</view>
				<view class="fwb fs34 col0 mt40">从事工种</view>
				<view class="item item2">
					<text class="pr z2 ">{{resume.category.name}}</text>
				</view>
				<view class="fwb fs34 col0 mt40">自我描述</view>
				<view class="item item3">
					<text class="pr z2 ">{{resume.summary}}</text>
				</view>

			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				resumeId: 0,
				isFav: false,
				taskStatus: 'none',
				resume: {
					username: '',
					mobile: '',
					gender_text: '',
					summary: '',
					user:{avatar:'',logintime_text:''},
					fav_district:{name: ''},
					education:{name: ''},
					category: {name: ''},
					work_experience: {name: ''},
				}
			}
		},
		onLoad(options) {
			this.resumeId = options.id;
			this.fetchDetail();
		},
		onShareAppMessage() {
			
		},
		onShareTimeline() {
			
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.primaryColor()
			})
		},
		methods: {
			fetchDetail() {
				this.$core.get({
					url: 'xilujob.task/resume_detail',
					data: {
						id: this.resumeId
					},
					success: ret => {
						this.resume = ret.data.resume;
						this.isFav = ret.data.is_fav;
						this.taskStatus = ret.data.task_status;
					},
					fail:err=>{
						uni.showModal({
							title: '提示',
							content: err.msg,
							showCancel:false,
							success() {
								uni.navigateBack();
							}
						})
						return false;
					}
				});
			},
			
			// 收藏
			bindToggleFav() {
				if (!this.$core.getUserinfo(true)) {
					return;
				}
				let page = this;
				page.isFav = !page.isFav;
				this.$core.post({
					url: '/xilujob.task/resume_toggle_fav',
					loading: false,
					data: {
						id: this.resumeId
					},
					success: (ret) => {
						page.isFav = ret.data.is_fav;
					},
					fail: ret => {
						uni.showToast({
							title: '收藏失败',
							icon: 'none'
						});
						page.isFav = !page.data.isFav;
						return false;
					}
				});
			},
			
			bindContact(){
				if(!this.taskStatus){
					uni.showToast({
						title: '认证未通过',
						icon: 'none'
					})
					return;
				}
				uni.makePhoneCall({
					phoneNumber: this.resume.mobile
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.top_nav {
		background: var(--primary);
		padding: 10rpx 30rpx 20rpx;

		.box {
			width: 690rpx;
			background: #FFFFFF;
			border-radius: 18rpx;
			position: relative;
			padding: 30rpx;

			.label {
				padding: 0 8rpx;
				display: inline-block;
				vertical-align: top;
				margin-right: 10rpx;
				margin-top: 10rpx;
				font-size: 22rpx;
				color: var(--primary);
				height: 32rpx;
				line-height: 32rpx;
				background: var(--primary1);
				border-radius: 4rpx;

			}

			.tips {
				position: absolute;
				top: 20rpx;
				right: 0;
				width: 121rpx;
				height: 62rpx;
			}
		}
	}

	.item {
		width: 690rpx;
		min-height: 110rpx;

		font-size: 30rpx;
		color: #000000;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.03);
		border-radius: 18rpx;
		position: relative;
		margin-top: 20rpx;
		padding: 30rpx;
		font-size: 30rpx;
		color: #000000;
		line-height: 42rpx;
		font-size: 30rpx;
		color: #000000;
		line-height: 42rpx;

		&.item2 {
			height: 158rpx;
		}

		&.item3 {
			height: 217rpx;
		}
	}


	.detail_item {
		padding: 30rpx;
		margin: 0 auto 30rpx;
		background: #FFF;
		border-radius: 18rpx;
	}

	.describe_tit {
		position: relative;
		font-size: 32rpx;
		color: #000;
		font-weight: bold;
		margin-bottom: 30rpx;
	}

	.describe_tit::after {
		content: '';
		position: absolute;
		left: 0;
		bottom: 0;
		width: 136rpx;
		height: 17rpx;
		background: var(--primary);
		opacity: 0.3
	}

	.describe_tit.tit1 {
		margin: 0 0 30rpx;
		font-size: 36rpx;
	}

	.describe_tit.tit1::after {
		width: 149rpx;
		height: 14rpx;
		border-radius: 7rpx;
		background: var(--primary);
		opacity: 0.3
	}


	.describe_small_tit {
		font-size: 28rpx;
		color: #000;
		font-weight: bold;
		padding-top: 20rpx;
		padding-bottom: 10rpx;
	}

	.describe_small_tit image {
		height: 20rpx;
		margin-left: 10rpx;
	}

	.describe_text {
		font-size: 30rpx;
		color: #333;
		line-height: 1.929
	}

	.tip {
		width: 52rpx;
		height: 46rpx;
		display: block
	}

	.tip_con {
		font-size: 22rpx;
		color: #999;
		padding-left: 24rpx;
	}

	.tip_con text {
		color: #FF7B20;
	}

	.mt55 {
		margin-top: 55rpx;
	}

	.detail_footer {
		padding: 14rpx 30rpx;
		background-color: #fff;
	}

	.footer_img1 {
		width: 80rpx;
	}

	.footer_img1 .text {

		font-size: 24rpx;
		color: #555555;
		line-height: 26rpx;
		text-align: center;
	}

	.footer_img1 image {
		width: 44rpx;
		height: 44rpx;
		display: block;
		margin: 0 auto 4rpx
	}

	.foot_btn {
		width: 502rpx;
		height: 86rpx;
		line-height: 86rpx;
		text-align: center;
		background: var(--primary);
		border-radius: 43rpx;
		margin-left: 30rpx;
		&.disabled{
			background: #BEBEBE;
		}
	}

	.popup {
		width: 615rpx;
		background: #FFFFFF;
		border-radius: 15rpx;
		border: 1px solid #979797;
		padding: 65rpx 60rpx 40rpx;

		.mt60 {
			margin-top: 60rpx;
		}

		.pop_btn1 {
			width: 236rpx;
			height: 98rpx;
			line-height: 98rpx;
			text-align: center;
			font-size: 30rpx;
			color: #FFFFFF;
			background: var(--primary);
			border-radius: 49rpx;
		}

		.pop_btn2 {
			width: 236rpx;
			height: 98rpx;
			line-height: 98rpx;
			text-align: center;
			font-size: 30rpx;
			color: #FFFFFF;
			background: #FF8B3B;
			border-radius: 49rpx;
		}

		.pop_btn {
			font-size: 30rpx;
			color: #FFFFFF;
			margin-top: 60rpx;
			width: 478rpx;
			height: 98rpx;
			background: var(--primary);
			border-radius: 49rpx;
			line-height: 98rpx;
			margin-left: auto;
			margin-right: auto;
			text-align: center;
		}
	}

	.top_user_img {
		width: 91rpx;
		height: 91rpx;
		border: 3rpx solid #FFFFFF;
		display: block;
		border-radius: 50%;
	}
</style>